<template>
    <el-row :gutter="30" v-for="(groupl,index) in groupList" :key="index" style="margin-top: 10px;margin-right: -10px;">
        <el-col :span="8" v-for="(groupinfo,innerindex) in groupl" :key="innerindex" @click="clickJump(groupinfo.groupid)">
            <el-badge v-if="groupBadge[groupinfo.groupid] != undefined && groupBadge[groupinfo.groupid].isclick == 0" :value="groupBadge[groupinfo.groupid].count" class="item grid-content">
                <el-card class="box-card groupcard">
                    <el-row align="middle">
                        <el-col :span="20">
                            <p class="grouptitle txtclamp" :title="groupinfo.corpname">{{groupinfo.name}}</p>
                            <p>媒资：{{groupinfo.mediacount}}</p>
                            <p>最后更新时间：{{groupinfo.lasttime}}</p>
                        </el-col>
                        <el-col :span="4">
                            <i class="iconfont icon-zhuomian"></i>
                        </el-col>
                    </el-row>
                    <!-- <el-row class="groupbottom">
                        <el-col :span="9">媒资：{{groupinfo.mediacount}}</el-col>
                        <el-col :span="15" align="right">最后更新时间：2021-12-24 15:11</el-col>
                    </el-row> -->
                </el-card>
            </el-badge>
            <el-badge v-else class="item grid-content">
                <el-card class="box-card groupcard">
                    <el-row align="middle">
                        <el-col :span="20">
                            <p class="grouptitle txtclamp" :title="groupinfo.corpname">{{groupinfo.name}}</p>
                            <p>媒资：{{groupinfo.mediacount}}</p>
                            <p>最后更新时间：{{groupinfo.lasttime}}</p>
                        </el-col>
                        <el-col :span="4">
                            <i class="iconfont icon-zhuomian"></i>
                        </el-col>
                    </el-row>
                </el-card>
            </el-badge>
        </el-col>
    </el-row>
</template>

<script>
    import {getGroupList,getGroupStatistics} from "@/api/media/media";
    import Cookies from 'js-cookie'
    import {ref} from 'vue';
    import { useRouter } from 'vue-router';
    import {useStore} from 'vuex'
    import CookiesDomainMixin from "@/mixins/cookiesDomainMixin";
    export default {
        name: "grouplist",
        components: {},
        setup() {
            const store = useStore()
            const corpid = store.getters.corpinfo.corpid
            const groupBadge = ref({})
            // 获取媒资列表
            const groupList = ref([])
            const { vcloudDomain } = CookiesDomainMixin()
            const getGroupListFunc = () =>{
                getGroupList().then(response => {
                    // console.log(response)
                    if( response.data.length > 0 ){
                        groupList.value = []
                        response.data.forEach((value,index) => {
                            const pindex = Math.floor(index/3)
                            if( !groupList.value[pindex] ){
                                groupList.value[pindex] = []
                            }
                            value.mediacount = '正在加载...'
                            value.lasttime = '正在加载...'
                            groupList.value[pindex].push(value)
                        });
                        getGroupStatisticsFun()
                    }
                })
            }
            /* 获取部门统计信息--start */
            function getGroupStatisticsFun( ){
                if( groupList.value && groupList.value.length > 0 ){
                    // 获取本地数据---start
                    let localStorageKey = corpid + '_0'
                    let localStorageData = {}
                    if( window.localStorage ){
                        let myLocalStorage = window.localStorage
                        if( myLocalStorage[localStorageKey] != undefined ){
                            localStorageData = JSON.parse(myLocalStorage[localStorageKey])
                        }
                    }else{
                        if( Cookies.get(localStorageKey) != undefined ){
                            localStorageData = JSON.parse(Cookies.get(localStorageKey))
                        }
                    }
                    // 获取本地数据---end
                    let promiseData = []
                    groupList.value.forEach(function( groupRowData ){
                        if( groupRowData.length && groupRowData.length > 0 ){
                            groupRowData.forEach(function( groupInfo ){
                                let query={groupid:groupInfo.groupid}
                                promiseData.push(getGroupStatistics( query ))
                            })
                        }
                    })
                    if( promiseData.length > 0 ){
                        Promise.all(promiseData.map(p => p.catch(e => {return e}))).then((result) => {
                            let promiseAllRes = result
                            let promiseAllResKey = 0
                            groupList.value.forEach(function( groupRowData ){
                                if( groupRowData.length && groupRowData.length > 0 ){
                                    groupRowData.forEach(function( groupInfo ){
                                        if( promiseAllRes[promiseAllResKey] != undefined && promiseAllRes[promiseAllResKey].errcode == 0 ){
                                            groupInfo.mediacount = promiseAllRes[promiseAllResKey].data.mediacount
                                            if( promiseAllRes[promiseAllResKey].data.mts > 0 ){
                                                groupInfo.lasttime = formartDate(promiseAllRes[promiseAllResKey].data.mts*1000)
                                            }else{
                                                groupInfo.lasttime = '无'
                                            }
                                        }else{
                                            console.log(promiseAllRes[promiseAllResKey])
                                        }
                                        promiseAllResKey++

                                        if( localStorageData[groupInfo.groupid] != undefined ){
                                            if( groupInfo.mediacount > localStorageData[groupInfo.groupid].oldcount ){
                                                localStorageData[groupInfo.groupid] = {
                                                    'count':(groupInfo.mediacount-localStorageData[groupInfo.groupid].oldcount),
                                                    'oldcount':localStorageData[groupInfo.groupid].oldcount,
                                                    'newcount':groupInfo.mediacount,
                                                    'isclick':0
                                                }
                                                groupBadge.value[groupInfo.groupid] = localStorageData[groupInfo.groupid]
                                                // localStorageData[groupInfo.groupid] = JSON.stringify(groupBadge.value[groupInfo.groupid])
                                            }else{
                                                localStorageData[groupInfo.groupid] = {
                                                    'count':0,
                                                    'oldcount':groupInfo.mediacount,
                                                    'newcount':groupInfo.mediacount,
                                                    'isclick':1
                                                }
                                                groupBadge.value[groupInfo.groupid] = localStorageData[groupInfo.groupid]
                                            }
                                        }else{
                                            localStorageData[groupInfo.groupid] = {'count':groupInfo.mediacount,'newcount':groupInfo.mediacount,'oldcount':groupInfo.mediacount}
                                            if( groupInfo.mediacount == 0 ){
                                                localStorageData[groupInfo.groupid].isclick = 1
                                            }else{
                                                localStorageData[groupInfo.groupid].isclick = 0
                                            }
                                            groupBadge.value[groupInfo.groupid] = localStorageData[groupInfo.groupid]
                                        }
                                    })
                                }
                            })
                            
                            // 写入本地数据---start
                            if( Object.keys(localStorageData).length > 0 ){
                                if( window.localStorage ){
                                    let myLocalStorage = window.localStorage
                                    myLocalStorage[localStorageKey] = JSON.stringify(localStorageData)
                                }else{
                                    Cookies.set(localStorageKey, JSON.stringify(localStorageData), { expires: 365,domain: vcloudDomain })
                                }
                            }
                            // 写入本地数据---end
                        })
                    }
                    
                }
            }
            function formartDate(param) {
                var time = new Date(param);
                var y = time.getFullYear();
                var m = time.getMonth()+1;
                var d = time.getDate();
                var h = time.getHours();
                var mm = time.getMinutes();
                var s = time.getSeconds();
                return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
            }

            function add0(m){
                return m<10?'0'+m:m;
            }
            const init = () => {
                getGroupListFunc()
            }
            init()
            //点击跳转链接
            const router = useRouter();
            const clickJump = ( groupid ) => {
                let localStorageKey = corpid + '_0'
                let localStorageData = ''
                if( window.localStorage ){
                    let myLocalStorage = window.localStorage
                    localStorageData = myLocalStorage[localStorageKey]
                    if( localStorageData != undefined ){
                        let localData = JSON.parse(localStorageData)
                        if( localData[groupid].isclick != 1 ){
                            localData[groupid].isclick = 1
                            localData[groupid].oldcount = localData[groupid].newcount
                            myLocalStorage[localStorageKey] = JSON.stringify(localData)
                        }
                    }
                }else{
                    localStorageData = Cookies.get(localStorageKey)
                    if( localStorageData != undefined ){
                        let cookieData = JSON.parse(localStorageData)
                        // console.log(cookieData)
                        if( cookieData[groupid].isclick != 1 ){
                            cookieData[groupid].isclick = 1
                            cookieData[groupid].oldcount = cookieData[groupid].newcount
                            Cookies.set(localStorageKey, JSON.stringify(cookieData), { expires: 365,domain: vcloudDomain })
                        }
                    }
                }
                router.push({name:'medialist',query: {groupid:groupid}})
            }
            return {
                groupList,
                init,
                clickJump,
                corpid,
                groupBadge
            }
        }
    }
</script>

<style scoped lang="scss">
    /* el-row-start */
    .el-row {
    margin-bottom: 20px;
    padding-right: 5px;
    &:last-child {
        margin-bottom: 0;
    }
    }
    .el-col {
    border-radius: 4px;
    }
    .bg-purple-dark {
    background: #99a9bf;
    }
    .bg-purple {
    background: #d3dce6;
    }
    .bg-purple-light {
    background: #e5e9f2;
    }
    .grid-content {
        width:100%;
        border-radius: 4px;
        min-height: 80px;
       // border: #dcdfe6 1px solid;
    }
    .groupcard{
        cursor: pointer;
        p{
            line-height: 22px;
        }
        font-size: 12px;
        color: #333;
        background-color: #fff !important;
        .grouptitle{margin-bottom:10px;font-size: 18px;font-weight: bold;}
        .icon-zhuomian{font-size: 50px;color:rgba(0,0,0,0.15);font-weight: bold;}
    }
    
    .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
    }
    /* el-row-end */
</style>
<style lang="scss">
    .groupcard{
        border:0;
    }
    .el-tabs{
        .el-tabs__content{
            overflow: unset;
        }
    }
</style>